<template>  
	<div class="co-wrap" v-loading="loading">
		<div class="co-wrap-header">
			<div class="co-wrap-left">
				<div class="co-wrap-left-top">
					<div class="co-wrap-name">
						<div class="name-img">
							<img class="head-img" v-lazy="fansItem.headImg" :key="fansItem.headImg">
							<img v-show="fansItem.isAuth == '1'" class="fans-v" src="~assets/images/v.png">
				   	  <!-- <i v-show="fansItem.isAuth == '1'" class="fans-v icon iconfont iconVIP1"></i> -->
						</div>
						<div class="name-content">
							<div class="name-content-top"> 
								<p class="username" :title="fansItem.nickName">{{nickname}}</p>
								<img v-if = "fansItem.sex == 'F'" src="~assets/images/sex-boy.png">
								<img v-else-if = "fansItem.sex == 'M'" src="~assets/images/sex-girl.png"> 
							</div>		
							<div class="name-content-bottom">
								<p class="plat-number">{{fansItem.platformName}}号:</p>
								<p class="name-en">{{fansItem.username}}</p>
							</div>
						</div>
					</div>
					<div class="co-wrap-name-right">
						<div class="cop-btn" @click="newTask">找TA连麦</div>
					</div>
				</div>
				<div class="co-wrap-left-middle">
					<div class="middle-wrap">
						<div class="mid-img"><img src="~assets/images/cake.png"></div>
						<p class="mid-age">{{fansItem.age}}岁</p>
					</div>
					<div class="middle-wrap" v-show = show>
						<div class="mid-img"><img src="~assets/images/geo-location.png"></div>
						<p class="mid-age">{{fansItem.provinceId}}</p>
					</div>
					<div class="middle-wrap">
						<div class="mid-img"><img src="~assets/images/tag.png"></div>
						<p class="mid-age">{{fansItem.typeName}}</p>
					</div>
				</div>
				<div class="co-wrap-left-bottom">
					<p>{{fansItem.introduce}}</p>
				</div>
			</div>      
			<div class="co-wrap-right">
				<div class="co-wrap-list">
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">粉丝量</p>
						<div class="co-wrap-item-bottom">{{fansItem.fansNum}}</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">作品数</p>
						<div class="co-wrap-item-bottom">{{fansItem.worksNum}}</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">总点赞数</p>
						<div class="co-wrap-item-bottom">{{fansItem.likeNum}}</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">总评论数</p>
						<div class="co-wrap-item-bottom">{{fansItem.commentsNum}}</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">总转发数</p>
						<div class="co-wrap-item-bottom">{{fansItem.forwardNum}}</div> 
					</div>
				</div>
				<div class="co-wrap-list co-wrap-list-mar">
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">昨日新增粉丝量</p>
						<div class="co-wrap-item-bottom arrow">
							<p>{{fansItem.raiseFans}}</p>
							<img src="~assets/images/r-bottom.png" v-if="+(fansItem.raiseFans) < 0">
							<img src="~assets/images/r-top.png" v-else-if="+(fansItem.raiseFans) > 0">
							<img src="" v-else>
						</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">昨日新增作品数</p>
						<div class="co-wrap-item-bottom arrow">
							<p>{{fansItem.raiseWorks}}</p>
							<img src="~assets/images/r-top.png" v-show="fansItem.raiseWorks >0">
						</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">昨日新增总点赞数</p>
						<div class="co-wrap-item-bottom arrow">
							<p>{{fansItem.raisePoints}}</p>
							<img src="~assets/images/r-top.png" v-show="fansItem.raisePoints >0">
						</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">昨日新增总评论数</p>
						<div class="co-wrap-item-bottom arrow">
							<p>{{fansItem.raiseComments}}</p>
							<img src="~assets/images/r-top.png"  v-show="fansItem.raiseComments >0">
						</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">昨日新增总转发数</p>
						<div class="co-wrap-item-bottom arrow">
							<p>{{fansItem.raiseForward}}</p>
							<img src="~assets/images/r-top.png"  v-show="fansItem.raiseForward >0">
						</div>
					</div>
				</div>
				<div class="co-wrap-list co-wrap-list-mar">
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">单品最佳销量</p>
						<div class="co-wrap-item-bottom">{{fansItem.singleSales}}</div>
					</div>
					<div class="co-wrap-item">
						<p class="co-wrap-item-top">7日总销售额</p>
						<div class="co-wrap-item-bottom">{{fansItem.daySalesMoney}}</div>
					</div>
					<div class="co-wrap-item bg-blue">
						<p class="co-wrap-item-top">单场预估单量</p>
						<div class="co-wrap-item-bottom">{{fansItem.estimateOrderNum}}</div>
					</div>
					<div class="co-wrap-item bg-blue" v-show = show>
						<p class="co-wrap-item-top">带货品类</p>
						<div class="co-wrap-item-bottom">红酒、家居、美食</div>
					</div>
				</div>
			</div>
		</div>
		<div class="co-wrap-footer">
			<div class="co-fans-paint">
				<p>粉丝画像</p>
			</div>
			<div class="co-distribute">
				<div class="co-distribute-left" v-show="show">
					性别分布
				</div>
				<div class="co-distribute-middle" v-show="show">
					年龄分布
				</div>
				<div class="co-distribute-right" >
					日活跃分布
				</div>
			</div>
			<div class="co-echarts-wrap">
				<div class="co-eacharts-left" v-show="show">
					<div id="sex"></div>
				</div>
				<div class="co-eacharts-middle" v-show="show">
					<div id="age"></div>
				</div>
				<div class="co-eacharts-right">
					<div id="live"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
 async fetch({store}) {
  },
  layout: 'internalouts',
  data(){
    return{
      sexchart:'',	//性别扇形图
      agechart:'',	//年龄扇形图
      livechart:'',	//日活跃柱状图	
      sexData:[{value: 30, name: '女'},{value: 70, name: '男'}], //性别扇形图数据
      ageData:[ //年龄扇形图数据
        {value: 30, name: '20岁以上下'},
        {value: 10, name: '46岁以上'},
        {value: 30, name: '41-45岁'},
        {value: 70, name: '33-40岁'},
        {value: 30, name: '26-32岁'}
      ],
      liveList:[5,3,2.5,3.5,4.3,5.2,1.856,4.562,0.789,0.456,2.3,3.4,4.5,2.5,3.1,2.05,3.15,4.13,5.22,2.856,3.562,3.789,4.456,4.3,2.4,0.5], //柱状图数据
		  fansItem:{}, //粉丝详情数据
			loading:false, //请求前的加载动画
			show:false,
		}
  },
  created(){
	},
	computed:{
    nickname(){
			return this.fansItem.nickName ?  this.fansItem.nickName.slice(0,6) : ''
		},
	},
	mounted(){
		this.sexInit();	//性别占比饼状图
		this.ageInit();	//年龄占比饼状图
		this.liveInit();	//活跃折线图
		this.anchorDetail();	//主播详情
  },
  methods:{
		anchorDetail(){ //连麦涨粉-主播详情
			this.loading = true;
      let params ={
        id:this.$route.query.id //主播详情页获取到主播列表页的主播id，在设置给主播id
      }
      this.$axios.$post('anchorDetail',params).then(res => {
				if(res.status === 200 ){
					this.fansItem = res.obj
					this.loading = false
				}else{
					this.$message.warning(res.msg)
				}
      })
				.catch(error => {
					this.$message.warning('请求失败');
					this.loading = fasle;
				})
    },
		newTask(){	//跳转到新建任务
			// this.go('/myAddFans/newtask')
			let anchorName = this.fansItem.nickName; //传递主播名字
			let id = this.fansItem.id; //传递主播ID
			this.$router.push({path:'/myAddFans/newtask',query:{name:anchorName,anchorId:id}})
		}, 
		sexInit(){	//性别占比饼状图
			this.sexchart = this.$echarts.init(document.getElementById('sex'));
			this.sexchart.setOption({
				title: {
				},
				series: [
					{
						data:this.sexData,
						name: '销量',
						type: 'pie',
						radius : '60%',//饼图的半径大小  
						center: ['50%','50%'],//饼图的位置 
						color:["#f2637b","#3aa1ff"],//设置饼状图所占比例的颜色
					}
				]
			})
		},     
		ageInit(){	//年龄占比饼状图   
			this.agechart = this.$echarts.init(document.getElementById('age'));
			this.agechart.setOption({
				title: {
				},
				series: [
					{
						data:this.ageData,
						name: '销量',
						type: 'pie',
						radius: ['40%', '60%'], //第一个参数是内圆半径，第二个参数是外圆半径，相对饼图的宿主div大小
						center: ['45%','50%'],//饼图的位置 
						color:["#f2637b","#3aa1ff",'#4ecb73','#fcd04b','#36cbcb'],//设置饼状图所占比例的颜色
					}
				]
			})
		},  
		liveInit(){	//日活跃柱状图
			this.livechart = this.$echarts.init(document.getElementById('live'));
			this.livechart.setOption({
				textStyle:{
					color:"#808080"
				},
				xAxis: {
					type: "category",
					data:['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],
					axisLine:{
						lineStyle:{
						color:'#d1d1d1'
						},
						axisLabel: {
							interval:1,//代表显示所有x轴每间隔标签显示
						}
					}
				},
				yAxis: {
					// 纵轴标尺固定
					type: "value",
					scale: true,
					max: 6,//最大刻度
					min: 0,//最小刻度
					//   splitNumber : 1
					axisTick: {//是否显示坐标轴刻度
							show: false
					},
					splitLine: {//设置x轴虚线的
						show:true,
						lineStyle: {
							type: 'dashed',
							color:'#e1e1e1'
						} 
					}
				},
				grid: {//x轴y轴偏移
					x: 25,
					y: 20,
					width: "95%", // 宽度
					height: "79%"// 高度
				},
				series: {
					data:this.liveList,
					type: "bar",
					barWidth:'40%', //设置柱状图的宽度大小
					barMaxWidth:'50%',  //设置柱状图的最大宽度大小,自适应
					lineStyle: {
						color: "#0096e6",
						width: 2,
						type: "solid"
					},
					itemStyle: {
						//柱形图圆角，鼠标移上去效果
						color:'#9cdcfe', 
						normal: {
							color:'#9cdcfe',//设置柱状图的背景色
							//柱形图圆角，初始化效果
							barBorderRadius:[15, 15, 0, 0]
						}
					}
				}
			})
		},
	},
}
</script>

<style scoped>
	/* 找TA连麦 */
	.co-wrap{
		width: 1200px;
		margin: 22px auto 0 auto;
		display: flex;
		justify-content: space-between;
		color:#333333;
		flex-wrap:wrap;
		font-size:14px;
		color:#bcbcbc;
	}
	.co-wrap-header{
		height:266px;
		display:flex;
		margin-bottom:20px;
	}
	.co-wrap-left{
		width:390px;
		height:266px;
		background:#ffffff;
		padding:20px 20px 30px;
		box-sizing:border-box;
		position:relative;
	}
	.co-wrap-left-top{
		display:flex;
	}
	.co-wrap-name-left{
		width:272px;
	}
	.co-wrap-name{
		width:270px;
		height:68px;
		display:flex;
		align-items:center;
	}
	.name-img{
		height:68px;
		width:68px;
		border-radius:50%;
		overflow: hidden;
	}
	.name-img>.head-img{
		width:100%;
		height:100%;
	}
	.fans-v{
		width:18px;
		height:18px;
		position: absolute;
		top: 66px;
		left: 69px;
	}
	.name-content{
		width:186px;
		height:68px;
		margin-left:20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.name-content-top{
		display:flex;
	}
	.name-content-top .username{
		font-size:18px;
		color:#333333;
		height:29px;
		margin-right:5px;
		font-weight:bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100px;
	}
	.name-content-top img{
		width:18px;
		height:18px;
	}
	.name-content-bottom{
		display:flex;
	}
	.name-content-bottom .plat-number{
		margin-right:12px;
	}
	/* 找它连麦 */
	.co-wrap-name-right{
		width:78px;
		height:68px;
	}
	.cop-btn{
		width:78px;
		height:26px;
		line-height:26px;
		text-align:center;
		border-radius:15px;
		cursor:pointer;
		background:#0096e6;
		user-select:none;
		color:#ffffff;
	}
	.cop-btn:hover{
		background:#66B1FF;
	}
	.bg-blue p,.bg-blue>div{
		color:#249ee8
	}
	.co-wrap-left-middle{
		margin-top:28px;
		display:flex;
	}
	.middle-wrap{
		width:110px;
		display:flex;
		height:16px;
		align-items:center;
	}
	.mid-img{
		width:16px;
		height:16px;
		margin-right:12px;
	}
	.mid-img img{
		width:100%;
		height:100%;
	}
	.co-wrap-left-bottom{
		margin-top:50px;
		width:348px;
	}
	.co-wrap-left-bottom p{
		line-height:1.2;
		text-overflow:ellipsis;
		overflow:hidden;
		display:-webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		text-align:justify;
	}
	/* 粉丝量 */
	.co-wrap-right{
		width:793px;
		margin-left:20px;
		height:266px;
		background:#ffffff;
		padding:26px 0px;
		box-sizing:border-box;
	}
	.co-wrap-list{
		display:flex;
		align-items:center;
	}
	.co-wrap-item{
		width:158px;
		text-align:center;
	}
	.co-wrap-item-bottom{
		color:#333333;
		font-weight:600;
		margin-top:12px;
		height:15px;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.co-wrap-item-bottom p{
		color:#333333;
	}
	.co-wrap-list-mar{
		margin-top:40px;
	}
	.arrow{
		display:flex;
		justify-content:center;
	}
	.co-wrap-item-bottom >p{
		margin-right:5px;
	}
	.co-wrap-footer{
		width:100%;
		height:384px;
		background:#ffffff;
	}
	.co-fans-paint{
		padding:20px;
		font-size:18px;
		color:#333333;
		font-weight:600;
	}
	.co-distribute{
		display:flex;
		margin-top:20px;
		margin-left:30px;
		text-indent:12px;
		font-weight:600;
		color:#333333;
	}
	.co-distribute-left{
		width:234px;
		border-left:3px solid #0096e6;
		box-sizing:border-box;
		margin-right:20px;
	}
	.co-distribute-middle{
		width:314px;
		border-left:3px solid #0096e6;
		box-sizing:border-box;
		margin-right:20px;
	}
	.co-distribute-right{
		width:552px;
		border-left:3px solid #0096e6;
		box-sizing:border-box;
		margin-right:20px;
	}
	/* echarts图表 */
	.co-echarts-wrap{
		width:1132px;
		margin:14px 30px; 
		height:256px;
		display:flex;
	}
	#sex{
		width:234px;
		height:256px;
		background:#fafbfc;
		margin-right:20px;
	}
	#age{
		width:314px;
		height:256px;
		background:#fafbfc;
		margin-right:20px;
	}
	#live{
		width:552px;
		height:256px;
		background:#fafbfc;
	}
  .none{
		width:0px !important;
		height:0px !important;
		border:0;
	}
</style>
